<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        @-webkit-keyframes open {
            0% {
                transform: rotateX(-120deg);
            }

            25% {
                transform: rotateX(25deg);
            }

            50% {
                transform: rotateX(-15deg);
            }

            75% {
                transform: rotateX(10deg);
                box-shadow: inset 0 0 0 0 #ccc;
            }

            100% {
                transform: rotateX(0deg);
            }
        }

        @-webkit-keyframes close {
            0% {
                transform: rotateX(0deg);
            }

            100% {
                transform: rotateX(-120deg);
            }
        }

        .wrap {
            width: 240px;
            position: relative;
            perspective: 800px;
            margin: 0 auto;
        }

        .wrap h3 {
            margin: 0;
            height: 40px;
            background: #f60;
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            position: relative;
            z-index: 10;
        }

        .wrap div {
            position: absolute;
            top: 30px;
            left: 0;
            transform-style: preserve-3d;
            width: 100%;
            transform-origin: top;
            transform: rotateX(-120deg);
            z-index: 1;
        }

        .wrap>div:nth-of-type(1) {
            top: 40px;
        }

        .wrap span {
            display: block;
            height: 28px;
            background: aquamarine;
            color: #fff;
            font: 14px/28px "宋体";
            text-indent: 20px;
            box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1);
            transition: 1s;
        }

        .wrap .open {
            transform: rotateX(0deg);
            animation: 5s open ease-in-out;
        }

        .wrap .open>span {
            box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0);
        }

        .wrap .close {
            transform: rotateX(-120deg);
            animation: 0.7s close ease-in-out;
        }

        .wrap .close>span {
            box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1);
        }

        #btn {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 30px;
            transition: 1s;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oWrap = document.getElementById("wrap");
            var aDiv = oWrap.getElementsByTagName("div");
            var i = 0;
            var oTimer = null;
            var iDelay = 200;
            var Boff = true;
            oBtn.onclick = function () {
                oBtn.style.left = "-300px";
                if (Boff) {
                    i = 0;
                    oTimer = setInterval(function () {
                        aDiv[i].className = "open";
                        if (i == aDiv.length - 1) {
                            clearInterval(oTimer);
                            oBtn.style.left = "0px";
                            oBtn.value = "关闭";
                        }
                        i++;
                    }, iDelay);
                }
                else {
                    i = aDiv.length - 1;
                    oTimer = setInterval(function () {
                        aDiv[i].className = "close";
                        if (i == 0) {
                            clearInterval(oTimer);
                            oBtn.style.left = "0px";
                            oBtn.value = "展开";
                        }
                        i--;
                    }, 100);
                }
                Boff = !Boff;
            };

        };
    </script>
</head>

<body>
    <input type="button" value="展开" id="btn" />
    <div class="wrap" id="wrap">
        <h3>这是标题</h3>
        <div>
            <span>选项1</span>
            <div>
                <span>选项2</span>
                <div>
                    <span>选项3</span>
                    <div>
                        <span>选项4</span>
                        <div>
                            <span>选项5</span>
                            <div>
                                <span>选项6</span>
                                <div>
                                    <span>选项7</span>
                                    <div>
                                        <span>选项8</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>